<template>
	<navigator class="card-record" :url="`/pagesMine/transactionDetail/transactionDetail?projectType=2&userProjectId=${item.userProjectId}`"
		hover-class="none">
		<view class="audit-view">
			<image v-if="item.status =='10'" src="/static/audit-pending.png" class="audit-icon"></image>
			<image v-else-if="item.status =='20'" src="/static/audit-succeed.png" class="audit-icon"></image>
			<image v-else-if="item.status =='30'" src="/static/audit-err.png" class="audit-icon"></image>
			<view v-if="item.status =='10'" class="audit-text">审核中</view>
			<view v-else-if="item.status =='20'" class="audit-text" style="color: #00C86C;">审核成功</view>
			<view v-else-if="item.status =='30'" class="audit-text" style="color: #FF5A36;">审核失败</view>
		</view>
		<view class="time-view">
			<image src="/static/cell-time.png" class="time-icon"></image>
			<view>{{dateFormat(item.times, 'YYYY.MM.DD HH:mm')}}</view>
		</view>
		<view class="cell-view">
			<view class="label-view">交易编号：</view>
			<view class="cell-value">{{item.orderNo}}</view>
		</view>
		<view class="cell-view">
			<view class="label-view">交易类型：</view>
			<view v-if="item.type == '10'" class="cell-tag">预约登记</view>
			<view v-if="item.type == '20'" class="cell-tag cell-tag-active">线上购买</view>
		</view>
		<view class="cell-view">
			<view class="label-view">交易项目：</view>
			<view class="cell-value">{{item.projectName || ''}}</view>
		</view>
		<view class="cell-view">
			<view class="label-view">交易金额：</view>
			<view class="cell-value">{{item.subscriptionAmount}}万</view>
		</view>
	</navigator>
</template>

<script>
	export default {
		name: "TransactionRecord",
		props: {
			item: Object
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.card-record {
		width: 707rpx;
		padding: 22upx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		margin-top: 18upx;
		position: relative;

		.audit-view {
			@extend .row;
			position: absolute;
			top: 36upx;
			right: 22upx;

			.audit-icon {
				width: 25upx;
				height: 25upx;
				margin-right: 11upx;
			}

			.audit-text {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #2C1101;
			}
		}

		.time-view {
			@extend .row-start;
			font-size: 33rpx;
			font-weight: 500;
			color: #2C1101;

			.time-icon {
				width: 25upx;
				height: 25upx;
				margin-right: 14upx;
			}
		}

		.cell-view {
			width: 100%;
			margin-top: 14upx;
			@extend .row-start;
			align-items: flex-start;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #2C1101;

			.label-view {
				color: #B8ACA3;
			}

			.cell-value {
				flex: 1;
			}

			.cell-tag {
				padding: 5upx 11upx;
				background: linear-gradient(270deg, #FFC456 0%, #FF912B 100%);
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.cell-tag-active {
				background: linear-gradient(270deg, #5761FF 0%, #2C32FF 100%);
			}
		}
	}
</style>